<template>
	<view class="details">


		<Top :title='title' :white="true"></Top>

		<view class="swiper_details">
			<swiper class="swiper" :current="current" :autoplay="autoplay" :interval="interval" @change='chank'
				:duration="duration" :circular="true">
				<swiper-item class="swiperitem" v-for="(item,index) in list" :key="index">
					<image class="tuk" :src="item"></image>

				</swiper-item>
			</swiper>
			<view class="numbox">{{current+1}}/{{list.length}}</view>
		</view>
		<!-- 店铺信息 -->
		<view class="studio flex justify-between align-center" style="margin-top: 20rpx;">
			<div class="leftbox flex">
				<div class="leftPhoto">
					<!-- <image :src="detailObj.shop.avatar_url" mode=""></image> -->
					<image :src="'https://sz.vvv5g.com'+detailObj.shop.avatar" mode=""></image>
				</div>
				<div class="center_details flex flex-column justify-between">
					<div class="top">
						{{detailObj.shop.shopname}}
					</div>
					<div class="tips flex align-center">
						<div class="tips_content" style="color: #999;">
							商品{{detailObj.shop.goods}}
						</div>
						<div class="line"></div>
						<div class="tips_content" style="color: #999;">
							访客{{detailObj.shop.views}}
						</div>
					</div>
				</div>
			</div>
		
			<div @click="goShopDetail" class="btn_goin">
				进店
			</div>
		</view>
		<view class="title" style="color: #333;">
			{{name}}
		</view>
		<view class="txt" style="color: #333;">
			{{des}}
		</view>
		<video v-if="video_src" style="display: block;width: 100%;" :src="video_src"></video>
		<bctos-rich-text :nodes="detail"></bctos-rich-text>
		<!-- <view class="txt">
			{{detail}}
		</view> -->
		<!-- <image class="bigimg" src="../../dianpu.png"></image> -->
	</view>
</template>

<script>
	import Top from '../../components/navBox/top.vue'
	export default {
		data() {
			return {
				title: '',
				autoplay: true,
				current: 0,
				interval: 2000,
				duration: 500,
				detailObj:{},
				list: [

				],
				name: '', //作品名称
				detail: '', //作品名称
				// numb:1,
				id: 0,
				des:'',//简介描述
				video_src:'',
			}
		},
		components: {
			Top
		},
		computed: {

		},
		onLoad(options) {
			this.id = options.id;
			this.getimglist();
			this.title = this.$store.state.shopsname.shopname;
		},
		mounted() {
			
		},
		methods: {
			//跳转店铺详情
			goShopDetail(){
				uni.navigateTo({
					url: '/pages/store/goodsList'
				})
			},
			// 切换轮播图
			chank(e) {
				this.current = e.detail.current;
			},
			getimglist() {
				this.$request({
					url: 'wedding/show_info',
					method: 'POST',
					data: {
						id: this.id
					}
				}).then(res => { 
					if (res.data.code == 1) {
						this.detailObj = res.data.data;
						this.list = res.data.data.images_src;
						this.name = res.data.data.name;
						this.des = res.data.data.des;
						res.data.data.detail = res.data.data.detail.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
							(match, capture) => {
								var img = `<img style="display: block; width: 100%;" src="${capture}">`;
								return img;
							});
						res.data.data.detail = res.data.data.detail.replace(/<video [^>]*src=['"]([^'"]+)[^>]*>/gi,
							(match, capture) => {
								var video = `<video style="display: block; width: 100%;" src="${capture}">`;
								return video;
							});
						this.detail = res.data.data.detail;
						if(res.data.data.video){
							this.video_src = res.data.data.video_src;
						}
					} else {
						this.$wanlshop.msg(res.data.msg);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	// 工作室
	.studio {
		height: 136rpx;
		width: 662rpx;
		padding: 0 24rpx;
		margin: 0rpx auto;
		border-radius: 20rpx;
		background: #fff;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
		.center_details {
			height: 88rpx;
			.top {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 28rpx;
				color: #333;
			}
		}
	
		.btn_goin {
			width: 88rpx;
			height: 54rpx;
			background: #EBBE87;
			border-radius: 78rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			text-align: center;
			line-height: 54rpx;
			font-size: 24rpx;
		}
	
		.leftPhoto {
			width: 88rpx;
			height: 88rpx;
			margin-right: 24rpx;
			border-radius: 50%;
			font-size: 0;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.line {
			width: 2rpx;
			height: 18rpx;
			margin: 0 16rpx;
			background-color: rgba(255, 255, 255, 0.6);
		}
	
		.tips {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.6);
	
		}
	}
	.details {
		width: 750upx;
		height: 100%;
		position: absolute;
		top: 0;
		overflow: scroll;
	}

	.swiper_details {
		width: 750rpx;
		height: 750rpx;
		position: relative;

		.numbox {
			position: absolute;
			width: 94rpx;
			height: 58rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 29rpx;
			text-align: center;
			color: #fff;
			font-size: 26rpx;
			line-height: 58rpx;
			right: 20rpx;
			bottom: 20rpx;
		}

		.swiper {
			width: 100%;
			height: 100%;

			.swiperitem {
				display: table;
				text-align: center;
				width: 100%;
				height: 100%;

				.tuk {
					width: 100%;
					display: table-cell;
					vertical-align: middle;
				}
			}

		}
	}

	.title {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		color: #fff;
		font-size: 38rpx;
		margin-bottom: 20rpx;
	}

	.txt {
		width: 690rpx;
		margin: 0 auto;
		color: #fff;
		font-size: 28rpx;
		margin-top: 20rpx;
		line-height: 46rpx;
		margin: 40rpx 24rpx;
	}

	.bigimg {
		width: 100%;
		margin-top: 40rpx;
	}
</style>
